<template>
  <div class="tableList-wk flex">
    <div class="table-list flex">
      <img :src="require('@/assets/images/'+ (data.type=='high'?'high_risk.png':data.type=='moderate'?'moderate_risk.png':'low_risk.png'))" alt="">
      <div class="table-list-cont">
        <p>{{data.title}}</p>
        <p style="color:#BFD9FF;font-size:1rem;text-align:left;"><span>{{ data.subTitle }}</span> <span>{{ data.time }}</span></p>
      </div>
      <div class="earlyWarning-icon">
        <span class="box-radius box-red" :class="data.type=='high'?'box-red':data.type=='moderate'?'box-orange':'box-yellow'">{{data.type=='high'?'高危':data.type=='moderate'?'中危':'低危'}}</span>
      </div>
      <div style="color:#BFD9FF">
        {{ data.specs }}
      </div>
      <div style="color:#BFD9FF">
        {{data.count}}
      </div>
    </div>

  </div>
</template>

<script>
export default {
  name: "TableList",
  props:{
    data:{
      type:Object,
      default(){
        return {}
      }
    }
  }
}
</script>

<style lang="scss" scoped>
.tableList-wk {
  padding:1.2rem .8rem;
  border-bottom: 1px solid #1D4996;
  .table-list {
    width:100%;
    font-size:1.1rem;
    justify-content: space-between;
    img {
      width: 4rem;
      margin-right:.8rem;
    }
    .table-list-cont{
      p{line-height:2rem;}
    }
  }
}
.box-radius{
  display:inline-block;
  padding:.3px 1.2rem;
  border-radius:2rem;
  background: rgba(219,7,32,0.20);
}
.box-red{
  border:1px solid #DB0720;
  color:#DB0720;
}
.box-orange{
  border:1px solid #FF6727;
  color:#FF6727;
}
.box-yellow{
  color:#E6B712;
  border:1px solid #E6B712;
}
</style>
